<template>
  <!-- 成功展示 -->
  <div
    class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 sm:pt-16 pt-12">
    <!-- 页面标题 -->
    <div class="pt-20 pb-8 bg-[#E30314] from-red-600 to-red-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
            {{ pageData.title }}
          </h1>
          <p class="text-xl text-red-100 max-w-3xl mx-auto">
            {{ pageData.subtitle }}
          </p>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- 织焰运动联名物业活动组织 -->
      <div class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
            {{ propertySection.title }}
          </h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            {{ propertySection.subtitle }}
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 活动卡片 -->
          <div
            v-for="(activity, index) in propertySection.activities"
            :key="index"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-br" :class="activity.gradient">
              <div class="flex items-center justify-center h-full">
                <div class="text-center text-white">
                  <div class="text-4xl mb-2">{{ activity.icon }}</div>
                  <div class="text-lg font-semibold">
                    {{ activity.category }}
                  </div>
                </div>
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-800 mb-3">
                {{ activity.title }}
              </h3>
              <p class="text-gray-600 mb-4">{{ activity.description }}</p>
              <div class="flex flex-wrap gap-2">
                <span
                  v-for="(tag, tagIndex) in activity.tags"
                  :key="tagIndex"
                  class="px-3 py-1 rounded-full text-sm"
                  :class="tag.class">
                  {{ tag.text }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计数据 -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-4 gap-6">
          <div
            v-for="(stat, index) in propertySection.stats"
            :key="index"
            class="bg-white rounded-lg p-6 text-center shadow-md">
            <div class="text-3xl font-bold text-red-600 mb-2">
              {{ stat.value }}
            </div>
            <div class="text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- 炽焙运动联名大型赛事组织 -->
      <div class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
            {{ eventSection.title }}
          </h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            {{ eventSection.subtitle }}
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <!-- 主要赛事 -->
          <div
            v-for="(event, index) in eventSection.mainEvents"
            :key="index"
            class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="h-64 relative" :class="event.gradient">
              <div class="absolute inset-0 bg-black bg-opacity-30"></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="text-center text-white">
                  <div class="text-6xl mb-4">{{ event.icon }}</div>
                  <div class="text-2xl font-bold">{{ event.category }}</div>
                </div>
              </div>
            </div>
            <div class="p-8">
              <h3 class="text-2xl font-bold text-gray-800 mb-4">
                {{ event.title }}
              </h3>
              <p class="text-gray-600 mb-6">{{ event.description }}</p>
              <div class="grid grid-cols-2 gap-4 mb-6">
                <div
                  v-for="(stat, statIndex) in event.stats"
                  :key="statIndex"
                  class="text-center">
                  <div class="text-2xl font-bold" :class="event.statColor">
                    {{ stat.value }}
                  </div>
                  <div class="text-sm text-gray-500">{{ stat.label }}</div>
                </div>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  v-for="(tag, tagIndex) in event.tags"
                  :key="tagIndex"
                  class="px-3 py-1 rounded-full text-sm"
                  :class="tag.class">
                  {{ tag.text }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他赛事展示 -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div
            v-for="(event, index) in eventSection.otherEvents"
            :key="index"
            class="bg-white rounded-lg p-6 shadow-md text-center">
            <div class="text-4xl mb-4">{{ event.icon }}</div>
            <h4 class="text-lg font-bold text-gray-800 mb-2">
              {{ event.title }}
            </h4>
            <p class="text-gray-600 text-sm mb-4">{{ event.description }}</p>
            <div class="text-red-600 font-semibold">
              {{ event.participants }}
            </div>
          </div>
        </div>

        <!-- 赛事统计数据 -->
        <div
          class="mt-12 bg-gradient-to-r from-red-600 to-red-800 rounded-xl p-8 text-white">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
            <div v-for="(stat, index) in eventSection.eventStats" :key="index">
              <div class="text-3xl font-bold mb-2">{{ stat.value }}</div>
              <div class="text-red-100">{{ stat.label }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系我们 -->
      <div class="text-center mt-16">
        <h3 class="text-2xl font-bold text-gray-800 mb-4">
          {{ contactSection.title }}
        </h3>
        <p class="text-gray-600 mb-6">{{ contactSection.description }}</p>
        <router-link
          :to="contactSection.button.link"
          class="inline-block bg-red-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors duration-200">
          {{ contactSection.button.text }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 页面配置数据
const pageData = ref({
  title: "炽焰运动成果展示",
  subtitle: "专业运动服务，打造精彩活动体验",
});

// 物业活动组织配置
const propertySection = ref({
  title: "织焰运动联名物业活动组织",
  subtitle: "与各大物业公司深度合作，为社区居民提供专业运动服务",
  activities: [
    {
      title: "晨跑俱乐部",
      category: "社区跑步活动",
      description: "组织社区居民参与晨跑活动，提供专业指导，建立健康生活方式",
      icon: "🏃‍♂️",
      gradient: "from-blue-400 to-blue-600",
      tags: [
        { text: "参与人数: 200+", class: "bg-blue-100 text-blue-800" },
        { text: "活动频率: 每周3次", class: "bg-green-100 text-green-800" },
      ],
    },
    {
      title: "社区瑜伽班",
      category: "瑜伽课程",
      description: "开设专业瑜伽课程，帮助居民放松身心，提升生活质量",
      icon: "🧘‍♀️",
      gradient: "from-green-400 to-green-600",
      tags: [
        { text: "参与人数: 150+", class: "bg-green-100 text-green-800" },
        { text: "课程类型: 5种", class: "bg-purple-100 text-purple-800" },
      ],
    },
    {
      title: "社区乒乓球赛",
      category: "乒乓球比赛",
      description: "举办社区乒乓球比赛，促进邻里交流，增强社区凝聚力",
      icon: "🏓",
      gradient: "from-purple-400 to-purple-600",
      tags: [
        { text: "参与人数: 80+", class: "bg-purple-100 text-purple-800" },
        { text: "比赛周期: 季度", class: "bg-orange-100 text-orange-800" },
      ],
    },
  ],
  stats: [
    { value: "50+", label: "合作物业" },
    { value: "1000+", label: "服务居民" },
    { value: "200+", label: "活动场次" },
    { value: "98%", label: "满意度" },
  ],
});

// 大型赛事组织配置
const eventSection = ref({
  title: "炽焙运动联名大型赛事组织",
  subtitle: "承办各类大型体育赛事，提供专业赛事策划和执行服务",
  mainEvents: [
    {
      title: "炽焰城市马拉松",
      category: "城市马拉松",
      description:
        "成功举办多届城市马拉松赛事，吸引来自全国各地的跑者参与，赛事规模不断扩大，已成为城市体育文化的重要品牌活动。",
      icon: "🏃‍♂️",
      gradient: "bg-gradient-to-br from-orange-400 to-red-600",
      statColor: "text-red-600",
      stats: [
        { value: "5000+", label: "参赛选手" },
        { value: "42.195km", label: "全程距离" },
      ],
      tags: [
        { text: "专业医疗", class: "bg-red-100 text-red-800" },
        { text: "补给站", class: "bg-blue-100 text-blue-800" },
        { text: "安全保障", class: "bg-green-100 text-green-800" },
      ],
    },
    {
      title: "炽焰企业篮球联赛",
      category: "企业篮球联赛",
      description:
        "组织企业间篮球联赛，促进企业文化建设，增强团队凝聚力，赛事覆盖多个行业，成为企业体育交流的重要平台。",
      icon: "🏀",
      gradient: "bg-gradient-to-br from-blue-400 to-blue-600",
      statColor: "text-blue-600",
      stats: [
        { value: "32", label: "参赛企业" },
        { value: "6个月", label: "赛季时长" },
      ],
      tags: [
        { text: "专业裁判", class: "bg-blue-100 text-blue-800" },
        { text: "直播转播", class: "bg-orange-100 text-orange-800" },
        { text: "数据分析", class: "bg-purple-100 text-purple-800" },
      ],
    },
  ],
  otherEvents: [
    {
      title: "足球联赛",
      description: "组织业余足球联赛，培养足球文化",
      icon: "⚽",
      participants: "24支球队",
    },
    {
      title: "羽毛球赛",
      description: "举办羽毛球锦标赛，推广全民健身",
      icon: "🏸",
      participants: "300+选手",
    },
    {
      title: "游泳比赛",
      description: "承办游泳锦标赛，提升游泳水平",
      icon: "🏊‍♂️",
      participants: "150+参赛者",
    },
  ],
  eventStats: [
    { value: "20+", label: "大型赛事" },
    { value: "10000+", label: "参赛选手" },
    { value: "50+", label: "合作品牌" },
    { value: "99%", label: "赛事成功率" },
  ],
});

// 联系我们配置
const contactSection = ref({
  title: "想要了解更多？",
  description: "联系我们，获取专业的运动服务解决方案",
  button: {
    text: "立即咨询",
    link: "/contact",
  },
});

onMounted(() => {
  console.log("Achievement page loaded");
});
</script>

<style scoped>
/* 响应式优化 */
@media (max-width: 768px) {
  .grid {
    gap: 1rem;
  }

  .p-8 {
    padding: 1.5rem;
  }

  .text-4xl {
    font-size: 2rem;
  }

  .text-3xl {
    font-size: 1.875rem;
  }
}

/* 动画效果 */
.bg-white {
  transition: all 0.3s ease;
}

.bg-white:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
